<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             title="打印拣货单"
             draggable
             width="1150px"
             append-to-body
  >
    <div style="height: 500px">
      <div>
        <el-button type="primary" @click="clickBatchDel">批量删除</el-button>
      </div>
      <vxe-table
          ref="tableRef"
          style="margin-top: 10px;"
          border
          align="center"
          :data="tableList"
          height="300"
          :checkbox-config="{ trigger:'row'}"
          :row-config="{isCurrent: true, isHover: true}"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column field="skuType" width="100" title="波次分类">
          <template #default="{row}">
            <div v-if="row.skuType=='1'">同品</div>
            <div v-else>
              {{ row.skuType }}品
            </div>
          </template>
        </vxe-column>
        <vxe-column field="batchCode" width="150" title="波次号">
        </vxe-column>
        <vxe-column field="orderNum" width="100" title="订单数量"></vxe-column>
        <vxe-column field="skuNum" width="100" title="拣货数量"></vxe-column>
        <vxe-column field="printNum" min-width="400" title="商品信息">
          <template #default={row}>
            <div v-for="(item,index) in row.orderDetailList" :key="index" style="display: flex;">
              <div style="width: 180px;">
                <ImagePreview :width="150" :height="50" :src="row.skuImg"></ImagePreview>
              </div>
              <div style="width: 200px;text-align: left">
                {{ item.skuName }}
              </div>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="deliveryName" width="120" title="打印类型"></vxe-column>
        <vxe-column fixed="right" width="200" title="操作">
          <template #default="{row}">
            <el-button type="text" style="color:red" @click="handleDelete(row)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <div style="padding: 10px;">
        <el-row>
          <el-col :span="4">
            <div>打印数量合计: <span style="font-size: 18px;color: red;">{{ printNumTotal }}</span></div>
          </el-col>
          <el-col :span="4">
            <div>同品订单: <span style="font-size: 18px;color: red;">{{ alikeTotal }}</span></div>
          </el-col>
          <el-col :span="4">
            <div>多品订单: <span style="font-size: 18px;color: red;">{{ muchTotal }}</span></div>
          </el-col>
<!--          <el-col :span="4">-->
<!--            <div>2品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
<!--          </el-col>-->
<!--          <el-col :span="4">-->
<!--            <div>3品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
<!--          </el-col>-->
<!--          <el-col :span="4">-->
<!--            <div>4品订单: <span style="font-size: 18px;color: #409EFF;">{{ printNumTotal }}</span></div>-->
<!--          </el-col>-->
        </el-row>
        <!--        快递单-->
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
            <div>
              快递单模板:
              <el-select
                  style="width: 150px;"
                  v-model="printTemp"
              >
                <template v-for="(item,index) in printTempList" :key="index">
                  <el-option :label="item.configName" :value="item.printConfigId"></el-option>
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              打印机:
              <el-select v-model="printMachine" clearable placeholder="打印机" style="width: 150px;">
                <template v-for="(item,index) in printNameList" :key="index">
                  <el-option
                      :label="item"
                      :value="item"
                  />
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="isCloseKd">打印后关闭弹框</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="clickPrintKd">快递单打印</el-button>
          </el-col>
        </el-row>
        <!--        分拣单-->
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
            <div>
              分拣单模板:
              <el-select
                  style="width: 150px;"
                  v-model="printTempFjd"
              >
                <template v-for="(item,index) in printTempListFjd" :key="index">
                  <el-option :label="item.configName" :value="item.printConfigId"></el-option>
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              打印机:
              <el-select v-model="printMachineFjd" clearable placeholder="打印机" style="width: 150px;">
                <template v-for="(item,index) in printNameList" :key="index">
                  <el-option
                      :label="item"
                      :value="item"
                  />
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="isCloseFjd">打印后关闭弹框</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="clickPrintFjd">分拣单打印</el-button>
          </el-col>
        </el-row>
        <!--        拣货单-->
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
            <div>
              拣货单模板:
              <el-select
                  style="width: 150px;"
                  v-model="printTempJhd"
              >
                <template v-for="(item,index) in printTempListJhd" :key="index">
                  <el-option :label="item.configName" :value="item.printConfigId"></el-option>
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              打印机:
              <el-select v-model="printMachineJhd" clearable placeholder="打印机" style="width: 150px;">
                <template v-for="(item,index) in printNameList" :key="index">
                  <el-option
                      :label="item"
                      :value="item"
                  />
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="isCloseJhd">打印后关闭弹框</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="clickPrintJhd">拣货单打印</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--  快递面单打印区域-->
    <div style="position: absolute;top:-9999px;">
      <template v-for="(item,index) in kdPrintData" :key="index">
        <div class="printDiv" :ref="'printDiv'+item.mailno">
          <div class="printTop">
            <div class="topleft">
              <div style="display: flex">
                <div class="toptext">{{ item.pdfInfoVo.mailno }}</div>
                <div class="toptext">{{ item.pdfInfoVo.mailno }}</div>
              </div>
              <div class="topTime">{{ item.pdfInfoVo.create_time }}</div>
            </div>

          </div>
          <div class="printPosition">
            {{ item.pdfInfoVo.position }} {{ item.pdfInfoVo.position_no }}
          </div>
          <div class="printCenter">
            <div class="centerLeft">
              <div class="cenLeftA">
                <svg :class="'mailNo'+item.mailno" style="text-align: center"></svg>
              </div>
              <div class="cenLeftB">
                {{ item.pdfInfoVo.tp_status }} {{ item.pdfInfoVo.innerProvinceName }}
              </div>
              <div class="cenLeftC">
                <div class="ctext">交</div>
                <div>{{ item.pdfInfoVo.package_wdjc }}</div>
              </div>
              <div class="cenLeftD">
                <div class="dshou">收</div>
                <div>
                  <div>{{ item.pdfInfoVo.receiver_name }} {{ item.pdfInfoVo.receiver_mobile }}</div>
                  <div>{{ item.pdfInfoVo.receiver_area_names }} {{ item.pdfInfoVo.receiver_address }}</div>
                </div>
              </div>
              <div class="cenLeftE">
                <div class="eji">寄</div>
                <div>
                  <div>{{ item.pdfInfoVo.sender_name }} {{ item.pdfInfoVo.sender_mobile }}</div>
                  <div>{{ item.pdfInfoVo.sender_area_names }} {{ item.pdfInfoVo.sender_address }}</div>
                </div>
              </div>
            </div>
            <div class="centerRight">
              <svg :class="'mailNo'+item.mailno" style="text-align: center"></svg>
            </div>
          </div>
          <div class="printBottom">
            <template v-for="(item,index) in printSkuList" :key="index">
              <div>{{ item.locationCode }} {{ item.skuName }} 【{{ item.skuNum }}件】</div>
            </template>
            <div style="text-align: right">已验视</div>
          </div>

        </div>
      </template>
    </div>

    <!-- 打印分拣单区域-->
    <div style="width: 76mm;position: absolute;top:-9999px;">
      <template v-for="(item,index) in fjdPrintData" :key="index">
        <div class="printDivFjd" :ref="'printDivFjd'+item.outId">
<!--          <div style="text-align: right;">{{ item.batchCode }} 拣货序号:{{ item.pickSort }}</div>-->
          <h1 style="text-align: center;">分拣单</h1>
          <div style="width: 100%;text-align: center">
            <svg :id="'barcode'+item.outId"></svg>
          </div>
          <div style="padding: 10px;">
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 30%;">出库单号:</div>
              <div style="width: 70%;text-align: right">{{ item.outCode }}</div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 30%;">应拣数量:</div>
              <div style="width: 70%;text-align: right">{{ item.outNum }}件</div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 30%;">商品品种:</div>
              <div style="width: 70%;text-align: right">{{ item.breedNum }}种</div>
            </div>

            <div style="font-size: 8pt;">
              <div style="display: flex;text-align: center;margin-top: 10px;">
                <div style="flex: 1"> 商品名称</div>
                <div style="flex: 1"> 拣货库位</div>
                <div style="flex: 1"> 拣货数量</div>
              </div>
              <template v-for="(sku,skuIndex) in item.detailList" :key="skuIndex">
                <div style="display: flex;text-align: center;margin-top: 10px;">
                  <div style="flex: 1"> {{ sku.skuName }}</div>
                  <div style="flex: 1">
                    <div>{{ sku.locationCode }}</div>

                  </div>
                  <div style="flex: 1">
                    <div> {{ sku.skuNum }}件</div>
                  </div>
                </div>
              </template>
            </div>

            <div style="margin-top: 10px;">拣货人:{{item.pickUserName}}</div>
            <div style="margin-top: 10px;">打印时间:{{ printTime }}</div>
          </div>

        </div>
      </template>
    </div>

    <!-- 打印拣货单区域-->
    <div style="width: 76mm;position: absolute;top:-9999px;">
      <div class="printDiv" id='printDivJhd'>
        <!--          <div style="text-align: right;">{{ item.batchCode }} 拣货序号:{{ item.pickSort }}</div>-->
        <h1 style="text-align: center;">拣货单</h1>
        <div style="padding: 10px;">
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 30%;">订单数量:</div>
            <div style="width: 70%;text-align: right">{{ jhdPrintData.orderNum }}</div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 30%;">拣货数量:</div>
            <div style="width: 70%;text-align: right">{{ jhdPrintData.outNum }}件</div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 30%;">拣货品种:</div>
            <div style="width: 70%;text-align: right">{{ jhdPrintData.breedNum }}种</div>
          </div>

          <div style="font-size: 8pt;">
            <div style="display: flex;text-align: center;margin-top: 10px;">
              <div style="flex: 1"> 拣货库位</div>
              <div style="flex: 1"> 商品名称</div>
              <div style="flex: 1"> 拣货数量</div>
            </div>
            <template v-for="(sku,skuIndex) in jhdPrintData.detailList" :key="skuIndex">
              <div style="display: flex;text-align: center;margin-top: 10px;">
                <div style="flex: 1">
                  <div>{{ sku.locationCode }}</div>

                </div>
                <div style="flex: 1"> {{ sku.skuName }}</div>
                <div style="flex: 1">
                  <div> {{ sku.skuNum }}件</div>
                </div>
              </div>
            </template>
          </div>

          <div style="margin-top: 10px;">拣货人:{{jhdPrintData.pickUserName}}</div>
          <div style="margin-top: 10px;">打印时间:{{ printTime }}</div>
        </div>

      </div>
    </div>

    <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getLodop} from "@/assets/LodopFuncs";
import {
  getPrintConfigList,
  getSelectBmOrderList,
  selectPickOrderList,
  selectSortingOrderList,
  updateOutOrderPrintNum
} from "@/api/scApi";
import JsBarcode from "jsbarcode";
import html2canvas from "html2canvas";
import {getNowDate} from "@/utils/shuangcheng";

const {proxy} = getCurrentInstance();
let saveParams = ref({})

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  detailList: {type: Array}
})

const emits = defineEmits(['cancel'])

function handleClose() {
  emits('cancel')
}

let tableList = ref([])
let LODOP;

let printNumTotal = ref(0) //打印数量合计
let alikeTotal=ref(0)//同品数量合计
let muchTotal=ref(0)//多品数量合计
onMounted(() => {
  tableList.value = props.detailList
  let printNum=0
  for (let i = 0; i <tableList.value.length ; i++) {
    printNum +=tableList.value[i].orderNum
  }
  printNumTotal.value =printNum
  //计算单品
  let alikeData= tableList.value.filter(item=> item.skuType===1)
  let alikeNum=0;
  for (let i = 0; i <alikeData.length ; i++) {
    alikeNum +=alikeData[i].orderNum
  }
  alikeTotal.value =alikeNum

  //计算多品数量
  let nuchNum=0;
  let nuchData=tableList.value.filter(item=> item.skuType!==1)
  for (let i = 0; i <nuchData.length ; i++) {
    nuchNum +=nuchData[i].orderNum
  }
  muchTotal.value =nuchNum;
  setTimeout(() => {
    LODOP = getLodop();
    getPrinterCount()
  }, 500)

  getKdTempList()
  getFjdTempList()
  getJhdTempList()
})

//批量删除
function clickBatchDel() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    tableList.value = tableList.value.filter(item => !selectRecords.some(selObj => selObj.batchId === item.batchId))
  }
}

function handleDelete(row) {
  tableList.value = tableList.value.filter(item => item.batchId !== row.batchId)
}

let printTemp = ref("") //快递打印模板的值
let printTempList = ref([]) //快递打印模板集合
let printMachine = ref("") //快递打印机的值
let tempStyle = ref("")//快递模板样式
let isCloseKd = ref(false)//快递单打印后是否关闭弹框
//获取快递模板
function getKdTempList() {
  let params = {
    pageSize: 0,
    param: {printType: 4, statusSort: true}
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      printTempList.value = res.data
      //设置默认模板 和默认打印机,样式
      printTemp.value = res.data[0].printConfigId
      printMachine.value = res.data[0].printMachine
      let tempData = printTempList.value.filter(temp => temp.printConfigId === printTemp.value)[0] //获取模板数据
      tempStyle.value = tempData.printStyle
    }
  })
}

//获取分拣单模板
let printTempFjd = ref("") //分拣单 打印模板的值
let printTempListFjd = ref([]) //分拣单 打印模板集合
let printMachineFjd = ref("") //分拣单 打印机的值
let tempStyleFjd = ref("")//分拣单 模板样式
let isCloseFjd = ref(false)//分拣单 打印后是否关闭弹框
let printTime=ref("")
function getFjdTempList() {
  let params = {
    pageSize: 0,
    param: {printType: 5, statusSort: true}
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      printTempListFjd.value = res.data
      //设置默认模板 和默认打印机,样式
      printTempFjd.value = res.data[0].printConfigId
      printMachineFjd.value = res.data[0].printMachine
      let tempData = printTempListFjd.value.filter(temp => temp.printConfigId === printTempFjd.value)[0] //获取模板数据
      tempStyleFjd.value = tempData.printStyle
    }
  })
}

//获取拣货单模板
let printTempJhd = ref("") //拣货单 打印模板的值
let printTempListJhd = ref([]) //拣货单 打印模板集合
let printMachineJhd = ref("") //拣货单 打印机的值
let tempStyleJhd = ref("")//拣货单 模板样式
let isCloseJhd = ref(false)//拣货单 打印后是否关闭弹框
function getJhdTempList() {
  let params = {
    pageSize: 0,
    param: {printType: 3, statusSort: true}
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      printTempListJhd.value = res.data
      //设置默认模板 和默认打印机,样式
      printTempJhd.value = res.data[0].printConfigId
      printMachineJhd.value = res.data[0].printMachine
      let tempData = printTempListJhd.value.filter(temp => temp.printConfigId === printTempJhd.value)[0] //获取模板数据
      tempStyleJhd.value = tempData.printStyle
    }
  })
}

//获取打印机
let printNameList = ref([])//打印机集合
function getPrinterCount() {
  LODOP = getLodop();
  if (LODOP) {
    //获取打印机个数
    let printNum = LODOP.GET_PRINTER_COUNT();
    for (let i = 0; i < printNum; i++) {
      printNameList.value.push(LODOP.GET_PRINTER_NAME(i))
    }
  }
}

//打印快递单
let kdPrintData = ref([])

function clickPrintKd() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!")
    } else {
      let batchIds = selectRecords.map(item => item.batchId)
      getSelectBmOrderList({'batchIds': batchIds}).then(res => {
        kdPrintData.value = res.data
        nextTick(async() => {
          for (let i = 0; i < kdPrintData.value.length; i++) {
            let dataobj = kdPrintData.value[i]
            await asyncFunction(dataobj)
          }
           if(isCloseKd.value){
             handleClose()
           }
          updatePrintNum(batchIds)
        })
      })
    }
  }
}
async function asyncFunction(dataobj) {
  return new Promise(resolve => {
    JsBarcode(".mailNo" + dataobj.mailno, dataobj.mailno, {
      width: 1.3,
      height: 20,
      fontSize: '14pt',
      fontOptions: 'bold',
      displayValue: true //是否在条形码下方显示文字
    });
    //打印
    html2canvas(proxy.$refs['printDiv' + dataobj.mailno][0], {
      backgroundColor: null,
    }).then((canvas) => {
      let url = canvas.toDataURL("image/png");
      if (LODOP) {
        LODOP.PRINT_INIT("");
        LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%", url);
        LODOP.SET_PRINT_PAGESIZE(1, tempStyle.value.width * 10, tempStyle.value.height * 10)//设置纸张大小
        LODOP.SET_PRINTER_INDEX(printMachine.value) //设置打印机
        LODOP.PRINT();
      }
      resolve()
    })

  });
}

//打印分拣单
let fjdPrintData = ref([])
function clickPrintFjd() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!")
    } else {
      let batchIds = selectRecords.map(item => item.batchId)
      selectSortingOrderList({'batchIds': batchIds}).then(res => {
        fjdPrintData.value = res.data
        printTime.value=getNowDate()
        nextTick(async () => {
          for (let i = 0; i <fjdPrintData.value.length ; i++) {
            let dataobj=fjdPrintData.value[i]
            await asyncFunctionFjd(dataobj)
          }
          if(isCloseFjd.value){
            handleClose()
          }
          updatePrintNum(batchIds)
        })
      })
    }

  }
}

async function asyncFunctionFjd(dataobj){
  return new Promise(resolve => {
    JsBarcode("#barcode"+dataobj.outId, dataobj.outCode, {
      width: 1.3,
      height: 20,
      fontSize: '14pt',
      fontOptions: 'bold',
      displayValue: true //是否在条形码下方显示文字
    });
    //打印
    html2canvas(proxy.$refs['printDivFjd'+dataobj.outId][0], {
      backgroundColor: null,
    }).then((canvas) => {
      let url = canvas.toDataURL("image/png");
      if (LODOP) {
        LODOP.PRINT_INIT("");
        LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%", url);
        LODOP.SET_PRINT_PAGESIZE(1, tempStyleFjd.value.width * 10, tempStyleFjd.value.height * 10)//设置纸张大小
        LODOP.SET_PRINTER_INDEX(printMachineFjd.value) //设置打印机
        LODOP.PRINT();
      }
    })
    resolve()
  });
}

//打印拣货单
let jhdPrintData = ref({})

function clickPrintJhd() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请先选择要打印的数据!")
    } else {
      let batchIds = selectRecords.map(item => item.batchId)
      selectPickOrderList({'batchIds': batchIds}).then(res => {
        jhdPrintData.value = res.data
        printTime.value=getNowDate()
        nextTick(() => {
          //打印
          let strFormHtml = document.querySelector("#printDivJhd").innerHTML
          LODOP.PRINT_INIT('')//初始化
          LODOP.SET_PRINT_PAGESIZE(1, tempStyleJhd.width * 10, tempStyleJhd.height * 10)//设置纸张大小
          LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
          LODOP.SET_PRINTER_INDEX(printMachineJhd.value) //设置打印机
          LODOP.PRINT()
          if(isCloseJhd.value){
            handleClose()
          }
          updatePrintNum(batchIds)
        })
      })
    }

  }
}

//更新打印次数
function updatePrintNum(batchId){
  updateOutOrderPrintNum({'batchIds':batchId}).then()
}

</script>

<style scoped lang="scss">
//表格合并
:deep(.flexTd) {
  padding: 0 !important;

  .vxe-cell {
    padding: 0 !important;
  }
}

.flexSub {
  height: 50px;
  line-height: 50px;
}

.flexSub:not(:last-child) {
  border-bottom: 1px solid #e8eaec;
}

.printDiv {
  margin: 0 auto;
  width: 74mm;
  height: 126mm;
  border: 1px solid black;
  font-family: "黑体", sans-serif;

  .printTop {
    display: flex;
    width: 100%;
    height: 13mm;
    border-bottom: 1px solid black;

    .topleft {
      padding-top: 5mm;
      padding-left: 2mm;
      width: 60mm;

      .toptext {
        width: 30mm;
        height: 4mm;
        font-size: 6pt;
      }

      .topTime {
        width: 42mm;
        height: 5mm;
        font-size: 8pt;
      }
    }

    .topright {
      width: 16mm;
      height: 12mm;
      font-size: 13pt;
      line-height: 12mm;
      text-align: right;
    }
  }

  .printPosition {
    width: 100%;
    height: 10mm;
    font-size: 26pt;
    font-weight: bold;
    text-align: center;
  }

  .printCenter {
    display: flex;
    margin: 0 auto;
    width: 95%;
    height: 58mm;
    border: 1px solid black;

    .centerLeft {
      width: 54mm;
      height: 58mm;
      border-right: 1px solid black;

      .cenLeftA {
        width: 54mm;
        height: 16mm;
        border-bottom: 1px solid black;
      }

      .cenLeftB {
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 12pt;
      }

      .cenLeftC {
        display: flex;
        width: 54mm;
        height: 6mm;
        border-bottom: 1px solid black;
        font-size: 16pt;
        font-weight: bold;

        .ctext {
          border: 2px solid black;
          font-weight: bold;
        }
      }

      .cenLeftD {
        display: flex;
        width: 54mm;
        height: 20mm;
        border-bottom: 1px solid black;
        font-size: 11pt;

        .dshou {
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          margin-top: 3mm;
          text-align: center;
        }
      }

      .cenLeftE {
        display: flex;
        width: 54mm;
        height: 10mm;
        font-size: 8pt;

        .eji {
          margin-top: 1mm;
          font-size: 11pt;
          width: 6mm;
          height: 6mm;
          border: 2px solid black;
          border-radius: 4mm;
          text-align: center;
        }
      }
    }

    .centerRight {
      width: 14mm;
      height: 54mm;
      margin-left: 15mm;
      transform: rotate(90deg);
      transform-origin: 0% 0%;
    }
  }

  .printBottom {
    margin: 0 auto;
    width: 95%;
    padding-top: 2mm;
  }
}
</style>